<template>
	<view class="cu-form-group">
	  <view class="title">专业</view>
	  <picker @change="onPickMajor" :value="curPickMajorIdx" :range="majorOpts" range-key="label">
	    <view class="picker">
	      {{curPickMajorIdx>-1?majorOpts[curPickMajorIdx].label:'请选择'}}
	    </view>
	  </picker>
	</view>
	<view class="bg-white padding-sm">
	  <view class="grid margin-bottom text-center text-sm text-bold col-6">
	    <!-- <view class="table-title-bg padding flex-sub">班级ID</view> -->
	<view class="table-title-bg padding flex-twice">专业班编号</view>
	    <view class="table-title-bg padding flex-twice">名称</view>
	    <view class="table-title-bg padding flex-twice">班主任</view>
	    <view class="table-title-bg padding flex-twice">状态</view>
	  </view>
	
	  <view class="table-item grid margin-bottom text-center col-6 text-sm" v-for="item in ZyClass" :key="item.COURSE_ID" @tap="toDetail(item.COURSE_ID + '',item.COURSENAME,item.MAJOR_ID + '',item.MAJOR_NAME)">
	    <!-- <view class="padding flex-sub">{{item.COURSE_ID}}</view> -->
			<view class="padding flex-sub">{{item.COURSENO}}</view>
	    <view class="padding flex-twice text-blue" style="text-decoration: underline">{{item.COURSENAME}}</view>
	    <view class="padding flex-twice" style="word-break:break-all;">{{item.CLASSLEADER}}</view>
	    <view class="padding flex-sub">{{item.STATENR}}</view>
	  </view>
	
	  <view v-if="ZyClass.length === 0" class="text-sm text-center">-- 暂无数据 --</view>
	</view>
	<view class="cu-form-group" v-if="COUNT > 0">
	  <view class="title" @tap="firstPage()"><text class="check-info-btn">首页</text></view>
	  <view class="title" @tap="lastPage()"><text class="check-info-btn">上一页</text></view>
	  <view class="title">{{page}}/{{COUNT}}</view>
	  <view class="title" @tap="nextPage()"><text class="check-info-btn">下一页</text></view>
	  <view class="title" @tap="endPage()"><text class="check-info-btn">尾页</text></view>
	</view>
</template>

<script setup lang="ts">
	import {computed, onMounted, ref} from "vue";
	import {useMajorList} from "../profile/useMajorList";
	import {useCourseZSList} from "./useCourseZSList";
	const {majorOpts} = useMajorList()
	const curPickMajorIdx = ref(-1)
	const page = ref<any>(1)
	function onPickMajor(e: any){
		page.value = 1
	  curPickMajorIdx.value = e.detail.value
	  initgetRDCourseList(majorOpts[e.detail.value].value,page.value = 1)
	}
	const {initgetRDCourseList,ZyClass,COUNT}:any = useCourseZSList()
	function firstPage() {
	  page.value = 1
		initgetRDCourseList(majorOpts[curPickMajorIdx.value]?.value,page.value)
	}
	
	function lastPage(){
	  if (page.value > 1){
	    page.value--
			initgetRDCourseList(majorOpts[curPickMajorIdx.value]?.value,page.value)
	  }
	}
	
	function nextPage() {
	  if (page.value < COUNT.value){
	    page.value++
			initgetRDCourseList(majorOpts[curPickMajorIdx.value]?.value,page.value)
	  }
	}
	
	function endPage(){
	  page.value = COUNT.value
		initgetRDCourseList(majorOpts[curPickMajorIdx.value]?.value,page.value)
	}
	
	function toDetail(COURSE_ID:string,COURSENAME:string,MAJOR_ID:string,MAJOR_NAME:string){
		uni.navigateTo({
			url: `/pages/manage/ZS?COURSE_ID=${COURSE_ID}&&COURSENAME=${COURSENAME}&&MAJOR_ID=${MAJOR_ID}&&MAJOR_NAME=${MAJOR_NAME}`
		})
	}
	onMounted(()=>{
		 initgetRDCourseList()
	})
</script>

<style>
</style>